package myJs.analysis

import myJs.api.Api
import myJs.cps._
import myJs.myPkg.{MyFetch, SwalOptions, swal}
import shared.Pojo._
import myJs.tool.Tool
import shared.tsPojo.TsPojo
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.collection.immutable.SeqMap
//import myJs.myPkg.i18n.ReactI18next
import myJs.Implicits._

import scala.scalajs.js.Dynamic.{global => g}
import upickle.default._
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object CellLineScatterCp {

  case class Props(showLoading: Boolean = true, geneName: String, refreshImg: Boolean = false,
                   refreshImgChange: Boolean => Unit)

  val component = FunctionalComponent[Props] { props =>

    val (imgSrc, setImgSrc) = useState("")
    val (xAxis, setXAxis) = useState("Expression(log-scale TPM)")
    val (yAxis, setYAxis) = useState("CRISPR-Gene Effect")
    val (linear, setLinear) = useState("Spearman")
    val xAxisMap = List("Expression(TPM)", "Expression(log-scale TPM)").optionMap
    val yAxisMap = List("CRISPR-Gene Effect").optionMap
    val linearMap = List("Pearson", "Spearman", "None").optionMap
    val (geneData, setGeneData) = useState("")

    object FTool {

      def refreshImg = () => {
        import TsPojo.analysis._
        if (props.geneName.nonBlank) {
          Tool.useLoadingF(showLoading = props.showLoading) { () =>
            val request = CellLineScatterImage.Request(geneName = props.geneName, xAxis = xAxis, yAxis = yAxis, linear = linear)
            Api.analysis.cellLineScatterImage(request).map { response =>
              if (response.valid) {
                val src = s"data:image/png;base64,${response.base64}"
                setImgSrc(src)
                setGeneData(response.geneData)
                props.refreshImgChange(false)
              } else {
                val options = SwalOptions(title = "Error", text = response.message, `type` = "error")
                swal(options)
              }
            }
          }
        }
        ()
      }

      def xAxisChange = (v: String) => {
        setXAxis(v)
      }

      def yAxisChange = (v: String) => {
        setYAxis(v)
      }

      def linearChange = (v: String) => {
        setLinear(v)
      }

      def downloadCsv = () => {
        Tool.downloadCsv(s"${props.geneName}_depexp.csv", geneData)
      }

      def downloadPng = () => {
        Tool.downloadPng(imgSrc = imgSrc, fileName = s"dep_scatterplot.png")
      }

      def downloadJpeg = () => {
        Tool.downloadJpeg(imgSrc = imgSrc, fileName = s"dep_scatterplot.jpeg")
      }

      def downloadPdf = () => {
        Tool.downloadPdf(imgSrc = imgSrc, fileName = s"dep_scatterplot.pdf")
      }

      def downloadSvg = () => {
        Tool.downloadSvg(imgSrc = imgSrc, fileName = s"dep_scatterplot.svg")
      }

    }

    useEffect(() => {
      FTool.refreshImg()
    }, List()
    )

    useEffect(() => {
      if (props.refreshImg) {
        FTool.refreshImg()
      }
    }, List(props.refreshImg)
    )

    div(style := Style(display = Tool.b2Display(imgSrc.nonBlank)),
      div(style := Style(display = csstypeStrings.flex, width = "100%"),
        div(style := Style(flex = 4.5),

          form(className := "form-horizontal", id := "form",


            div(style := Style(display = csstypeStrings.flex, marginRight = 15), className := "form-group",
              div(style := Style(flex = 3, display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
                label(style := Style(paddingTop = 15), className := "control-label",
                  "X Axis:"),
              ),
              div(style := Style(flex = 5, height = 34, display = csstypeStrings.flex, alignItems = csstypeStrings.center,
                paddingTop = 15), className := "col-sm-2",
                PureSelectCp(optionMap = xAxisMap, value = xAxis, onChange = FTool.xAxisChange)
              ),
              div(style := Style(flex = 2, display = csstypeStrings.flex))
            ),

            div(style := Style(display = csstypeStrings.flex, marginRight = 15), className := "form-group",
              div(style := Style(flex = 3, display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
                label(style := Style(paddingTop = 15), className := "control-label",
                  "Y Axis:"),
              ),
              div(style := Style(flex = 5, height = 34, display = csstypeStrings.flex, alignItems = csstypeStrings.center,
                paddingTop = 15), className := "col-sm-2",
                PureSelectCp(optionMap = yAxisMap, value = yAxis, onChange = FTool.yAxisChange)
              ),
              div(style := Style(flex = 2, display = csstypeStrings.flex))
            ),

            div(style := Style(display = csstypeStrings.flex, marginRight = 15), className := "form-group",
              div(style := Style(flex = 3, display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
                label(style := Style(paddingTop = 15), className := "control-label",
                  "Linear Regression:"),
              ),
              div(style := Style(flex = 5, height = 34, display = csstypeStrings.flex, alignItems = csstypeStrings.center,
                paddingTop = 15), className := "col-sm-2",
                PureSelectCp(optionMap = linearMap, value = linear, onChange = FTool.linearChange)
              ),
              div(style := Style(flex = 2, display = csstypeStrings.flex))
            ),

            div(className := "form-group",
              div(className := "actions col-sm-offset-2 col-sm-3",
                button(style := Style(width = "95%"), `type` := "button", className := "btn btn-primary myAddShow",
                  onClick := FTool.refreshImg,
                  s" Plot"
                  ,
                ),
              ),
            ),
          ),

        ),
        div(style := Style(flex = 4.5),
          div(style := Style(display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`,marginBottom = 5),
            a(onClick := FTool.downloadCsv, className := "btn  btn-default", title := "Export data",
              i(className := "glyphicon glyphicon-export")
            ),
            div(style := Style(marginLeft = 5,marginRight = 10), className := "btn-group",
              a(title := "Export image", className := "btn  btn-default idsButton", data - "toggle" := "dropdown",
                data - "hover" := "dropdown", data - "close-others" := "true", aria - "expanded" := "false",
                i(className := "fa fa-bars")
              ),
              ul(className := "dropdown-menu pull-right",
                li(
                  a(onClick := FTool.downloadPng, "Download PNG image")
                ),
                li(
                  a(onClick := FTool.downloadJpeg, "Download JPEG image")
                ),
                li(
                  a(onClick := FTool.downloadPdf, "Download PDF image")
                ),
                li(
                  a(onClick := FTool.downloadSvg, "Download SVG image")
                ),
              )
            )

          ),
          img(className := "mySvg", id := "boxplotImg", src := imgSrc)
        ),
        div(style := Style(flex = 1))
      )
    )


  }

  object STool {

  }

}
